<template>
  <div>
    <div class="container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="">
          <el-input v-model="formInline.key" placeholder="请输入对象KEY"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="formInline.name" placeholder="请输入对象名称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="add">添加</el-button>
          <el-button type="primary" @click="exportToExcel">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <template>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="对象KEY" width="170">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.key }}</span>
            </template>
          </el-table-column>
          <el-table-column label="对象名称" width="170">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="对象类型" width="170">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.type }}</span>
            </template>
          </el-table-column>
          <el-table-column label="对象大小" width="170">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.size }}</span>
            </template>
          </el-table-column>
          <el-table-column label="图片" width="170">
            <template slot-scope="scope">
              <!-- <div class="img" style="width: 50px;height: 60px;"> -->
              <img :src='scope.row.url' alt="" style="margin-left: 10px;width: 40px;height: 60px;">
              <!-- </div> -->
            </template>
          </el-table-column>
          <el-table-column label="图片链接" width="170">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.url }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
    <div class="block">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage4" :page-sizes="[5, 10, 15, 20]" :page-size=Number(pageSize)
        layout="total, sizes, prev, pager, next, jumper" :total=Number(total)>
      </el-pagination>
    </div>
    <el-dialog title="修改对象名称" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="对象名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="change">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="上传对象" :visible.sync="dialogFormVisible2">
      <el-upload
        :action="uploadUrl"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
        :show-file-list="false"
        :before-upload="beforeUpload"
        
      >
        <el-button type="primary">点击上传图片</el-button>
      </el-upload>
    </el-dialog>

  </div>
</template>

<script>
const XLSX = require('xlsx');
import { yonghu,bianji, shanchu,tianjia } from '@/api/xtgl/dxcc.js';
export default {
  name: 'DocumentsOs',

  data() {
    return {
      headers:sessionStorage.getItem('token'),
      ruleForm:{
        name:''
      },
      dialogFormVisible2:false,
      dialogFormVisible: false,
      pageSize: '20',
      total: '',
      currentPage4: 1,
      formInline: {
        
      },
      tableData: [],
      rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
          ],
      },
      uploadUrl: '/api/admin/storage/create',
      uploadLoading: false, // 上传加载状态
    };
    
  },

  mounted() {
    this.show()
  },

  methods: {
    exportToExcel() {
      // 创建一个工作簿对象
      let workbook = XLSX.utils.book_new();

      // 定义表头
      const headers = ['对象KEY', '对象名称', '对象类型', '对象大小', '图片链接'];

      // 从 tableData 中提取数据并转换为数组
      const data = this.tableData.map(row => [
        row.key,
        row.name,
        row.type,
        row.size,
        row.url
      ]);

      // 在数据数组开头插入表头
      data.unshift(headers);

      // 创建一个工作表对象
      let worksheet = XLSX.utils.aoa_to_sheet(data);

      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      // 导出Excel文件
      XLSX.writeFile(workbook, 'data.xlsx');
    },
    change(){
      bianji({...this.ruleForm}).then((res)=>{
        console.log(res);
        this.show()
        
      })
      this.dialogFormVisible = false
      
    },
    onSubmit() {
      yonghu({
        page: 1,
        limit: 20,
        sort: 'add_time',
        order: 'desc',
        key: this.formInline.key,
        name: this.formInline.name
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    add() {
      this.dialogFormVisible2=true
      // tianjia().then((res)=>{
      //   console.log(res);
      //   if(res.errmsg=='成功'){
      //       this.$notify({
      //       title: '成功',
      //       message: '添加成功',
      //       type: 'success'
      //     });
      //     this.show()
      //   }
        
      // })
      
    },
    show() {
      yonghu({
        page: Number(`${this.currentPage4}`),
        limit: Number(`${this.pageSize}`),
        sort: 'add_time',
        order: 'desc'
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.list
        this.total = res.data.total
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.show()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val
      this.show()

    },
    handleEdit(index, row) {
      console.log(index, row);
      this.ruleForm=row
      this.dialogFormVisible = true
    },
    handleDelete(index, row) {
      console.log(index, row);
      shanchu({...row}).then((res)=>{
        console.log(res);
        if(res.errmsg=='成功'){
            this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
          });
          this.show()
        }
        
        
      })

    },
    beforeUpload(file) {
      this.uploadLoading = true;
      return true; // 可以在这里添加文件类型、大小等验证逻辑
    },
    handleUploadSuccess(response, file, fileList) {
      this.uploadLoading = false;
      console.log('上传成功', response);
      // 这里可以添加上传成功后的逻辑，比如更新表格数据等
      this.$notify({
        title: '成功',
        message: '图片上传成功',
        type: 'success'
      });
      this.dialogFormVisible2=false
      this.show()
    },
    handleUploadError(error, file, fileList) {
      this.uploadLoading = false;
      console.log('上传失败', error);
      this.$notify({
        title: '失败',
        message: '图片上传失败',
        type: 'error'
      });
    },
  },
};
</script>